<template>
    <div>
        <el-dialog v-model="props.PublicDialog" @close="handlePublicClose" title="
管理货源">
            <el-button type="primary" @click="addCargo" class="mb8">新增</el-button>
            <el-table :data="product_cargo" style="min-height: 300px;">
                <el-table-column label="备注">
                    <template #default="scope">
                        <el-input placeholder="请输入" v-model="scope.row.remark
                            "></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="货源URL链接">
                    <template #default="scope">
                        <el-input placeholder="请输入" v-model="scope.row.sourceUrl
                            "></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button type="primary" link :disabled="!scope.row.sourceUrl" v-copyText="scope.row.sourceUrl"
                            v-copyText:callback="copyTextSuccess">复制</el-button>
                        <el-button type="primary" link target="_blank" tag="a" :href="scope.row.sourceUrl"
                            :disabled="sourceUrlDisabled(scope.row.sourceUrl)">跳转</el-button>
                        <el-button type="danger" link @click="removeCargo(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <el-button @click="handlePublicClose">取消</el-button>
                <el-button type="primary" @click="handlePublicSure">确定
                </el-button>
            </template>
        </el-dialog>

    </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, watch, reactive, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["handlePublicClose", "handlePublicSure"]);

const props = defineProps({
    publicFrom: {
        type: Object,
        default: {},
    },

    PublicDialog: {// 默认隐藏
        type: Boolean,
        default: false,
    },
    PublicType: {// 默认隐藏
        type: Boolean,
        default: false,
    },
});
const product_cargo = ref([])//货源列表

watch(
    () => props.PublicDialog,
    () => {
        if (!props.PublicDialog) return
        // product.general.publicproductresourceurlList({
        product_cargo_list()//获取货源列表
    }
);
const product_cargo_list = () => {
    if (props.PublicType) {
        product.general.publicproductresourceurlList({
            data: {
                pageNum: 1,
                pageSize: 999,
                param: { productId: props.publicFrom.id, },
            },
        }).then(res => {//货源列表
            product_cargo.value = []
            if (res.data?.length) {
                res.data = res.data.map(code => {
                    return { ...code, publicProductId: props.publicFrom.id }
                })
            }
            product_cargo.value = res.data
        })

    } else {
        product.general.productresourceurlList({
            data: {
                pageNum: 1,
                pageSize: 999,
                param: { productId: props.publicFrom.id, },
            },
        }).then(res => {//货源列表
            product_cargo.value = []
            if (res.data?.length) {
                res.data = res.data.map(code => {
                    return { ...code, productId: props.publicFrom.id }
                })
            }
            product_cargo.value = res.data
        })
    }


}
const handlePublicSure = () => {
    if (checkCargo()) return
    if (props.PublicType) {

        product.general.publicproductresourceurlEdit(
            { data: product_cargo.value.length ? product_cargo.value : [{ publicProductId: props.publicFrom.id }] }
        ).then((res) => {
            if (res.code === 200) {
                emits("handlePublicSure");
                proxy.$modal.msgSuccess(res.message)
            }
        })
    } else {
        product.general.productresourceurlEdit({
            data: product_cargo.value.length ? product_cargo.value : [{ productId: props.publicFrom.id }]
        }).then(res => {
            if (res.code === 200) {
                emits("handlePublicSure");
                proxy.$modal.msgSuccess(res.message)
            }
        })
    }
}
const checkCargo = () => {
    if (!product_cargo.value.length) return false
    if (product_cargo.value.some(item => item.sourceUrl == '')) {
        proxy.$modal.msgError(`请完整填写货源URL`);
        return true
    }
    if (product_cargo.value.some(item => sourceUrlDisabled(item.sourceUrl))) {
        proxy.$modal.msgError(`请正确填写货源URL`);
        return true
    }
    return false
}
const handlePublicClose = () => {
    emits("handlePublicClose");
}
const sourceUrlDisabled = (sourceUrl) => {
    let pattern = /^(http|https):\/\/([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(:\d+)?(\/.*)?$/
    pattern.test(sourceUrl)
    return !pattern.test(sourceUrl)
}
const copyTextSuccess = () => {/** 复制代码成功 */
    proxy.$modal.msgSuccess("复制成功");
}
const addCargo = () => {//新增货源
    if (props.PublicType) {
        product_cargo.value.push({
        remark: '',//备注
        sourceUrl: '',//货源地址
        publicProductId: props.publicFrom.id
    })

    } else {
        product_cargo.value.push({
        remark: '',//备注
        sourceUrl: '',//货源地址
        productId: props.publicFrom.id
    })

    }
    
}
const removeCargo = (index) => {//删除货源
    product_cargo.value.splice(index, 1);
}
</script>